<template>

    <el-form :model="baseInfo"
             ref="baseInfoForm"
             label-width="150px">
        <el-form-item  label="订单编码" >
            <el-input v-model="baseInfo.orderId" placeholder="请输入订单编码" style="width: 220px" />
        </el-form-item>
        <el-form-item label="订单状态" >
            <el-select  v-model="baseInfo.orderStatus" placeholder="请选择订单状态" style="width: 220px" disabled>
                <el-option
                        v-for="dict in order_status.order_status"
                        :key="dict.value"
                        :label="dict.label"
                        :value="dict.value"
                ></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="订单日期">
            <el-date-picker clearable
                            v-model="baseInfo.orderDate"
                            type="datetime"
                            value-format="YYYY-MM-DD HH:mm:ss"
                            placeholder="请选择订单日期">
            </el-date-picker>
        </el-form-item>

        <el-form-item label="业务类型" >
            <el-select v-model="baseInfo.businessType" placeholder="请选择业务类型"  style="width: 220px" disabled>
                <el-option
                        v-for="dict in business_type.business_type"
                        :key="dict.value"
                        :label="dict.label"
                        :value="dict.value"
                ></el-option>
            </el-select>
        </el-form-item>

      <el-form-item label="客户名称">
        <el-select v-model="baseInfo.customerId" placeholder="请选择客户名称"  style="width: 220px"    disabled>
          <el-option
              v-for="user in customerlist"
              :key="user.customerId"
              :label="user.customerName"
              :value="user.customerId"
          ></el-option>
        </el-select>
      </el-form-item>

        <el-form-item label="付款方式" >
            <el-select v-model="baseInfo.paymentMethod" placeholder="请选择付款方式"  style="width: 220px">
                <el-option
                        v-for="dict in payment_meth.payment_meth"
                        :key="dict.value"
                        :label="dict.label"
                        :value="dict.value"
                ></el-option>
            </el-select>
        </el-form-item>

        <el-form-item label="配送方式" >
            <el-input v-model="baseInfo.transportMode" type="textarea" placeholder="请输入内容" />
        </el-form-item>
        <el-form-item label="物流单号" >
            <el-input v-model="baseInfo.logisticsNumber" type="textarea" placeholder="请输入内容" />
        </el-form-item>
    </el-form>

    <div style="text-align: center ; margin-top: 20px" >
        <el-button size="medium" @click="handleBack">上一页，取消订单新增</el-button>
        <el-button type="primary" size="medium" @click="handleNext">下一步，填写收货人信息</el-button>
    </div>
</template>

<script>

    import { useDict } from '@/utils/dict.js'
    import {getCustomerList, listInfo,getInfo, updateInfo} from "@/api/system/info.js";
    import useUserStore from "@/store/modules/user.js";
    const userStore = useUserStore();

    export default {
        name: "BaseInfo",

      props: {
        value: Object // 使用 value 作为 prop 名称以支持 v-model
      },


        data(){
            return{
                baseInfo:{
                    orderId : null,
                    orderStatus:'1',
                    orderDate : null,
                    businessType : null,
                    customerId : null,
                    paymentMethod : null,
                    transportMode : null,
                    logisticsNumber : null

                },
              customerId:userStore.id,
              customerlist:{},
                order_status : useDict('order_status'),
                payment_meth:useDict('payment_meth'),
                business_type:useDict('business_type'),
              localBaseInfo: { ...this.value } // 创建本地副本
            }
        },


      mounted() {
          this.getCustomerList();
          this.defaultCustomer();
      },

      methods:{

          defaultCustomer(){
            getInfo(this.customerId).then(response => {
              this.customerInfo = response.data;
              this.baseInfo.customerId = this.customerInfo.customerId;
              this.baseInfo.businessType = this.customerInfo.businessType;
              this.$emit('update:customerId', this.customerId);
              console.log('customerInfo',this.customerInfo)
            }).catch(error => {
              console.error('获取客户信息失败:', error);
            });
          },


        updateCustomerId(value) {
         // 发射事件以更新父组件中的 customerId
        },

            handleNext() {

              console.log('baseInfo:', this.baseInfo)
                this.$emit('nextStep'); // 触发 nextStep 事件
            },
            handleBack(){
                this.$tab.closeOpenPage(this.$route);
                this.$router.go(-1);
            },

            getCustomerList(){
              listInfo().then(response =>{
                this.customerlist = response.rows;
              })
            },
            getCurrentData() {
              return this.baseInfo;
            }

        }
    }
</script>

<style scoped>
    .centered-button {
        width: 20%;
        margin-left: 42%;
        text-align: center;
    }
</style>